<template>
  <!--todo:学者门户-->
<div>
    <navigator-menu></navigator-menu>
  <div class="outer">
    <div class="inner1">
      <div class="leftBlock">
        <div class="profilePhoto" :style="{'background-image':'url('+imageUrl+')'}">
            <cut-portrait :userId="this.id" UploadUrl="/api/user/setAvatar" @getUrl="getUrl" class="upload invisible"></cut-portrait>
        </div>
        <input class="editInput invisible" v-model="this.usernameTmp"/>
        <button class="editInput invisible" @click="confirmEditUsername">确认</button>
        <p class="username editUsernameFunc">
          {{username}}
        </p>
        <div class="message editUsernameFunc" @click="editUsername">
          <el-tooltip
                class="item"
                effect="dark"
                content="编辑昵称"
                placement="bottom"
          >
          <i class="far fa-edit"></i> 
          </el-tooltip>
        </div>
        <div class="message" @click="toMessageList">
          <el-tooltip
                class="item"
                effect="dark"
                content="消息通知"
                placement="bottom"
          >
          <i class="fas fa-envelope"></i>
          </el-tooltip>          
        </div>
        <div class="message" @click="toMyPage(this.id,this.id)">
          <el-tooltip
                class="item"
                effect="dark"
                content="我的主页"
                placement="bottom"
          >
          <i class="far fa-user"></i>
          </el-tooltip>           
        </div>
      </div>
      <div class="rightBlock">
        <div class="rightLeftBlock">
          <div class="number">
            <p class="t1">{{numberOfFan}}</p>
            <p class="t2">粉丝</p>
          </div>
          <div class="gapLine">
          </div>
          <div class="number">
            <p class="t1">{{numberofFollow}}</p>
            <p class="t2">关注</p>
          </div>
        </div>
        <button class="editProfileSetting" @click="dialogSettingVisible=true">
        个人设置
        </button>
        <el-dialog v-model="dialogSettingVisible" title="个人设置">
          <div class="setting" style="width:30rem;height:34rem;display:flex;flex-direction:column;align-items:center;justify-content:center">
            <div>
              <label>用户名:</label>
              <input v-model="usernameTmp"/>
            </div>
            <div v-if="isBookman">
              <label>真实姓名:</label>
              <input v-model="realNameTmp" disabled="disabled"/>
            </div>
            <div style="margin-top:1.5rem;">
              <label>生日:</label>
                  <el-date-picker
                      v-model="birthdayTmp"
                      type="date"
                      placeholder="选择日期"
                      :disabled-date="disabledDate"
                      :shortcuts="shortcuts"
                  >
                  </el-date-picker>
            </div>
            <div v-if="isBookman">
              <label>认证时间:</label>
              <input v-model="claimTime" disabled="disabled"/>
            </div>     
            <div v-if="isBookman">
              <label>机构:</label>
              <input v-model="affiTmp"/>
            </div>    
            <div v-if="isBookman">
              <label>领域:</label>
              <input v-model="fieldTmp"/>
            </div>                  
            <div>
              <label>邮箱:</label>
              <input v-model="emailTmp"/>
            </div>
            <div style="margin-top:3rem;">
              <label style="font-weight:600">修改密码:</label>
            </div>
            <div>
              <label>请输入旧密码:</label>
              <input v-model="oldPassword" type="text" name="password" AUTOCOMPLETE="off"  class="input-text" onfocus="this.type='password'" placeholder="请输入旧密码"/>
            </div>
            <div>
              <label>请输入新密码:</label>
              <input v-model="newPassword" type="text" name="password" AUTOCOMPLETE="off"  class="input-text" onfocus="this.type='password'" placeholder="请输入新密码"/>
            </div>
            <div>
              <label>再次输入新密码:</label>
              <input v-model="newPasswordAgain" type="text" name="password" AUTOCOMPLETE="off"  class="input-text" onfocus="this.type='password'" placeholder="请再次输入密码"/>
            </div>
          </div>
          <div slot="footer" class="dialog-footer" style="margin-top:3rem;margin-left:30rem">
            <el-button @click="editSettingCancel">取消</el-button>
            <el-button type="primary" @click="editSetting">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="inner2">
      <div class="inner2Top">
        <div class="tab1 tab Lower" @click="toCollection('tab1')">收藏的文献</div>
        <div v-if="isBookman" class="tab2 tab" @click="topaper('tab2')">学术成果</div>
        <div class="tab3 tab" @click="toFollow('tab3')">粉丝/关注</div>
      </div>
      <div class="inner2Bottom">
        <div class="gapLineOut">
          <div class="gapLineHorizon"></div>
        </div>
        <div class="collection tabBottom">
          <div class="contentTop">
            <div class="contentTopInner">
              <div><i class="fas fa-list"></i><span style="margin-right:1.5rem">全部文献</span></div>
            </div>
          </div>
          <div class="contentBottom">
              <input class="filterInput" placeholder="输入标题关键字进行筛选" v-model="this.filters.title1"/>
              <el-table :data="pageData1" style="width:80%;margin-bottom:2rem" max-height="380">
                <el-table-column prop="title" label="标题" sortable></el-table-column>
                <el-table-column prop="authors" label="作者"></el-table-column>
                <el-table-column prop="year" label="出版年份"></el-table-column>
                <el-table-column prop="paperId" lable="id" v-if="false"></el-table-column>
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <div style="display:flex;align-items:center;justify-content:center">
                      <div class="Op" @click="toPaperDetail(scope.row.paperId)">
                            <el-tooltip
                                  class="item"
                                  effect="dark"
                                  content="查看文献"
                                  placement="bottom"
                            >
                            <i class="fas fa-search-plus"></i>
                            </el-tooltip>                           
                      </div>
                      <el-popconfirm title="确定要删除吗？" @confirm="deletePaper(scope.row.paperId)">
                        <template #reference>
                          <div class="Op">
                            <el-tooltip
                                  class="item"
                                  effect="dark"
                                  content="从收藏中删除"
                                  placement="bottom"
                            >
                            <i class="far fa-trash-alt"></i>
                            </el-tooltip>                            
                          </div>
                        </template>
                      </el-popconfirm>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination background layout="prev, pager, next, jumper" :total="tableData1.length" :page-size="this.pageSize1"      
              v-model:current-page="this.curPage1"            
              @current-change="handleCurrentChange1"
              :hide-on-single-page="true"
              @size-change="handleSizeChange1" style="margin-bottom:3rem"></el-pagination>
          </div>
        </div>
        <div class="paper tabBottom invisible">
          <div class="contentTop" >
            <div class="contentTopInner" style="width:40rem;">
                <div @click="toDisplayPaper" class="displayPaperOp changeColor" style="margin-left:-13rem"><i class="fas fa-sticky-note"></i><span style="margin-right:1.5rem">展示论文</span></div>
                <div @click="toAllPaper" class="allPaperOp"><i class="fas fa-paste"></i><span style="margin-right:1.5rem">全部论文</span></div>
                <span style="color:#546e7a">展示论文总数:</span><p style="font-size:1.1rem;">{{this.displayPaperList.length}}</p>
                <span style="margin-left:1rem;color:#546e7a">总论文数:</span><p style="font-size:1.1rem">{{this.paperList.length}}</p>
            </div>
          </div>
          <div class="contentBottom displayPaper">
              <input class="filterInput" placeholder="输入标题关键字进行筛选" v-model="this.filters.title2"/>
              <el-table :data="pageData2" style="width: 70%" max-height="380">
                <el-table-column type="expand">
                  <template #default="props">
                    <p>标题: {{ props.row.title }}</p>
                    <p>出版年份: {{ props.row.year }}</p>
                    <p>引用量: {{ props.row.n_citation }}</p>
                    <p>关键词: {{ props.row.keywords }}</p>
                    <p v-if="false">paperId:{{props.row.paperId}}</p>
                    <div style="display:flex;align-items:center;justify-content:center;margin-left:-10rem">
                      <div class="Op" @click="toPaperDetail(props.row.paperId)">
                            <el-tooltip
                                  class="item"
                                  effect="dark"
                                  content="查看文献"
                                  placement="bottom"
                            >
                            <i class="fas fa-search-plus"></i>
                            </el-tooltip>                          
                      </div>
                      <el-popconfirm title="确定要删除吗？" @confirm="deleteDisplayPaper(props.row.paperId)">
                        <template #reference>
                          <div class="Op">
                            <el-tooltip
                                  class="item"
                                  effect="dark"
                                  content="从展示列表删除"
                                  placement="bottom"
                            >
                            <i class="far fa-trash-alt"></i>
                            </el-tooltip>                             
                          </div>
                        </template>
                      </el-popconfirm>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="标题" prop="title" />
                <el-table-column label="作者" prop="author" />
              </el-table>
              <el-pagination background layout="prev, pager, next, jumper" :total="tableData2.length" :page-size="pageSize2"  
              v-model:current-page="this.curPage2"                  
              @current-change="handleCurrentChange2"
              :hide-on-single-page="true"
              @size-change="handleSizeChange2" style="margin-bottom:3rem;margin-top:1rem;"></el-pagination>
          </div>
          <div class="contentBottom invisible allPaper">
              <input class="filterInput" placeholder="输入标题关键字进行筛选" v-model="this.filters.title3"/>
              <el-table :data="pageData3" style="width: 70%" max-height="380">
                <el-table-column type="expand">
                  <template #default="props">
                    <p>标题: {{ props.row.title }}</p>
                    <p>出版年份: {{ props.row.year }}</p>
                    <p>引用量: {{ props.row.n_citation }}</p>
                    <p>关键词: {{ props.row.keywords }}</p>
                    <p v-if="false">paperId:{{props.row.paperId}}</p>
                    <div style="display:flex;align-items:center;justify-content:center;margin-left:-10rem">
                      <div class="Op" @click="toPaperDetail(props.row.paperId)">
                            <el-tooltip
                                  class="item"
                                  effect="dark"
                                  content="查看文献"
                                  placement="bottom"
                            >
                            <i class="fas fa-search-plus"></i>
                            </el-tooltip>                            
                      </div>
                      <div class="Op" @click="addDisplayPaper(props.row.paperId)">
                            <el-tooltip
                                  class="item"
                                  effect="dark"
                                  content="添加到展示列表"
                                  placement="bottom"
                            >
                            <i class="fas fa-plus"></i>
                            </el-tooltip>                        
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="标题" prop="title" />
                <el-table-column label="作者" prop="author" />
              </el-table>
              <el-pagination background layout="prev, pager, next, jumper" :total="tableData3.length" :page-size="pageSize3"
              v-model:current-page="this.curPage3"                    
              @current-change="handleCurrentChange3"
              :hide-on-single-page="true"
              @size-change="handleSizeChange3" style="margin-bottom:3rem;margin-top:1rem;"></el-pagination>
          </div>
        </div>
        <div class="follow tabBottom invisible">
          <div class="contentTop">
            <div class="contentTopInner" style="width:15rem">
              <div @click="toAllFan" class="allFanOp changeColor"><i class="fas fa-user"></i><span style="margin-right:1.5rem">全部粉丝</span></div>
              <div @click="toAllFollow" class="allFollowOp"><i class="fas fa-user-check"></i><span style="margin-right:1.5rem">全部关注</span></div>
            </div>
          </div>
          <div class="contentBottom allFan">
            <p v-if="this.fanList.length==0" style="color:grey;font-size:1.2rem">还没有人关注你</p>
            <fan-card v-for="(item,index) in this.pageData4" :key="index" :userId="item.id" :fanName="item.fanName" :imageUrl="this.url+item.imageUrl" :userIdIn="this.id"></fan-card>
            <el-pagination background layout="prev, pager, next, jumper" :total="fanList.length" :page-size="pageSize4"
            v-model:current-page="this.curPage4"                    
            @current-change="handleCurrentChange4"
            :hide-on-single-page="true"
            @size-change="handleSizeChange4" style="margin-top:2rem;"></el-pagination>
          </div>
          <div class="invisible contentBottom allFollow">
            <p v-if="this.followList.length==0" style="color:grey;font-size:1.2rem">你还没关注过别人</p>
            <follow-card v-for="(item,index) in this.pageData5" :key="index" :userId="item.id" :followName="item.followName" :imageUrl="this.url+item.imageUrl" :userIdIn="this.id" @deleteFollow="deleteFollow"></follow-card>
            <el-pagination background layout="prev, pager, next, jumper" :total="followList.length" :page-size="pageSize5"                  
            v-model:current-page="this.curPage5"  
            @current-change="handleCurrentChange5"
            :hide-on-single-page="true"
            @size-change="handleSizeChange5" style="margin-top:2rem;"></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</template>

<script>
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";
import NavigatorMenu from "../components/NavigatorMenu";
import FanCard from "../components/FanCard";
import FollowCard from "../components/FollowCard";
import CutPortrait from '../components/CutPortrait';
import axios from 'axios'
export default {
  name: "Profile",
  components: {
    NavigatorMenu,
    VueCropper,
    FanCard,
    FollowCard,
    CutPortrait,
  },
  mounted:function(){
    this.id=sessionStorage.getItem('id');
    axios.get('/api/user', { params: { userId: this.id } }) ////获取个人信息
.then(response=> { 
    console.log(response);
    console.log("test");
    this.userMsg.avatar=response.data.data.avatar;
    this.userMsg.bio=response.data.data.bio;
    this.userMsg.birthday=response.data.data.birthday;
    this.userMsg.gender=response.data.data.gender;
    this.userMsg.id=response.data.data.id;
    this.userMsg.identity=response.data.data.identity;
    this.userMsg.isAdmin=response.data.data.isAdmin;
    this.userMsg.loginDate=response.data.data.loginDate;
    this.userMsg.mail=response.data.data.mail;
    this.userMsg.name=response.data.data.name;
    this.userMsg.pwd=response.data.data.pwd;
    this.userMsg.state=response.data.data.state;
    this.userMsg.codeDate=response.data.data.codeDate;
    this.userMsg.vercode=response.data.data.vercode;
    

    this.birthdayTmp=this.birthday=response.data.data.birthday;
    this.password=response.data.data.pwd;
    this.username=this.usernameTmp=response.data.data.name;
    this.imageUrl=this.url+response.data.data.avatar;
    this.isBookman=response.data.data.identity==2;//2表示学者
    this.email=this.emailTmp=response.data.data.mail;
    if(this.isBookman){
    axios.get('/api/scholar/getByUserId',{params:{userId:this.id}})//是学者的话继续获取学者的关键信息
    .then(response=>{
      console.log(response);
      this.scholarMsg.id=response.data.data.id;
      this.scholarMsg.userId=response.data.data.userId;
      this.scholarMsg.authorId=response.data.data.authorId;
      this.scholarMsg.name=response.data.data.name;
      this.scholarMsg.claimTime=response.data.data.claimTime;
      this.scholarMsg.hotIndex=response.data.data.hotIndex;
      this.scholarMsg.field=response.data.data.field;
      this.scholarMsg.affi=response.data.data.affi;
      this.scholarMsg.paperList=response.data.data.paperList;

      this.realName=this.realNameTmp=response.data.data.name;
      this.claimTime=response.data.data.claimTime;
      this.affi=this.affiTmp=response.data.data.affi;
      this.field=this.fieldTmp=response.data.data.field;
      console.log(this.scholarMsg);
    axios.post('/api/scholar/get-paperlist',{scholarId:this.scholarMsg.id})//获取学者全部论文
    .then(response=>{
      console.log(response);
      response.data.data.forEach((item,index)=>{
        if(item!=null){
        let paper={};
        paper.title=item.title;
        paper.paperId=item.id;
        paper.year=item.year;
        let authors="";
        item.authors.forEach((author,index)=>{
          authors=authors+author.name+',';
        })
        paper.author=authors.substr(0,authors.length-1);
        let keywords="暂无,";
        if(item.keywords!=null){
          keywords="";
          item.keywords.forEach((item,index)=>{
          keywords=keywords+item+',';
        })
        }
        paper.keywords=keywords.substr(0,keywords.length-1);
        paper.n_citation=item.n_citation;
        this.paperList.push(paper);
        }
      })
    })
    .catch(error=>{
      console.log(error);
    });
      axios.post('/api/scholarPortal/getpapershow-byscholarId',{scholarId:this.scholarMsg.id})//获取展示论文
      .then(response=>{
        console.log(response);
        response.data.data.forEach((item,index)=>{
        let paper={};
        paper.title=item.title;
        paper.paperId=item.id;
        paper.year=item.year;
        let authors="暂无,";
        if(item.authors!=null){
          authors="";
          item.authors.forEach((author,index)=>{
          authors=authors+author.name+',';
        })
        }
        paper.author=authors.substr(0,authors.length-1);
        let keywords="暂无,";
        if(item.keywords!=null){
          keywords="";
          item.keywords.forEach((item,index)=>{
          keywords=keywords+item+',';
        })
        }
        paper.keywords=keywords.substr(0,keywords.length-1);
        paper.n_citation=item.n_citation;
        this.displayPaperList.push(paper);
      })
      })      
    })
    .catch(error=>{
      console.log(error);
    });
    }
        axios.get('/api/collection',{params:{userId:this.id}})//获取收藏列表
    .then(response=>{
      console.log(response);
      response.data.data.forEach((item,index)=>{
        let collect={};
        collect.title=item.title;
        collect.paperId=item.id;
        collect.year=item.year;
        let authors="";
        item.authors.forEach((author,index)=>{
          authors=authors+author.name+',';
        })
        collect.authors=authors.substr(0,authors.length-1);
        this.collectPaperList.push(collect);
      })
    })
    .catch(function(error){
      console.log(error);
    });
    axios.get('/api/follow',{params:{userId:this.id}})//获取关注列表
    .then(response=>{
      console.log(response);
      response.data.data.forEach((item,index)=>{
        if(item!=null){
          let tmp={};
          tmp.id=item.id;
          tmp.followName=item.name;
          tmp.imageUrl=item.avatar==null?"no":item.avatar;
          this.followList.push(tmp);          
        }
      })
      this.numberofFollow=this.followList.length;
    })
    .catch(error=>{
      console.log(error);
    })
    axios.get('/api/follow/fans',{params:{userId:this.id}})//获取粉丝列表
    .then(response=>{
      console.log(response);
      response.data.data.forEach((item,index)=>{
        if(item!=null){
            let tmp={};
            tmp.id=item.id;
            tmp.fanName=item.name;
            tmp.imageUrl=item.avatar==null?"no":item.avatar;
            this.fanList.push(tmp);
        }
      })
      this.numberOfFan=this.fanList.length;
    })
    .catch(error=>{
      console.log(error);
    })
}).catch(function (error) { 
  console.log(error); 
});
  },
  data:function(){
    return{
      url:'http://124.70.186.113:39245',
      userMsg:{},
      scholarMsg:{},
      isBookman:true,//是否是学者
      totalPaper:"2",
      totalPaperCite:"999",
      previews:{},
      dialogSettingVisible:false,
      id:1,
      username:"",
      birthday:"2021-1-1",
      birthdayTmp:"2021-1-1",
      realName:"",
      realNameTmp:"",
      affi:"",
      affiTmp:"",
      field:"",
      fieldTmp:"",
      claimTime:"",
      email:"13036552571@163.com",
      phoneNumber:"13036552571",
      password:"",
      oldPassword:"",
      newPassword:"",
      newPasswordAgain:"",
      usernameTmp:"",
      emailTmp:"",
      numberOfFan:0,
      numberofFollow:0,
      imageUrl:'',
      collectPaperList:[/*
        {
          title:"神经网络",
          authors:"狗大屁，狗大屁",
          paperId:'2',
          year:"2021"
        },
        {
          title:"数学",
          authors:"狗大屁，狗大屁",
          paperId:'1',
          year:"2021",
        },
                {
          title:"神经网络222",
          authors:"狗大屁，狗大屁",
          paperId:'2',
          year:"2021"
        },
        {
          title:"数学111",
          authors:"狗大屁，狗大屁",
          paperId:'1',
          year:"2021",
        },*/
        
      ],
      fanList:[/*
        {
          id:2,
          fanName:"aaa",
          imgUrl:require('../assets/images/bg.jpg'),
        },*/
      ],
      followList:[/*
        {
          id:1,
          followName:"ddd",
          imgUrl:require('../assets/images/bg.jpg'),
        },*/
      ],
      paperList:[/*
        {
          paperId:"1",
          title:"深度学习",
          year:"2021-12-1",//出版年份
          n_read:"190",//浏览量
          n_citation:"222",//引用量
          keywords:"深度学习，深度学习，深度学习",
          author:"ssss",
        },
        {
          paperId:"2",
          title:"浅度学习",
          year:"2021-12-1",//出版年份
          n_read:"990",//浏览量
          n_citation:"922",//引用量
          keywords:"浅度学习，浅度学习，浅度学习",
          author:"sssss",
        },*/
      ],
      displayPaperList:[/*
        {
          paperId:"1",
          title:"深度ssss学习",
          year:"2021-12-1",//出版年份
          n_read:"190",//浏览量
          n_citation:"222",//引用量
          keywords:"深度学习，深度学习，深度学习",
          author:"asdasd",
        },
        {
          paperId:"2",
          title:"浅度dsaasd学习",
          year:"2021-12-1",//出版年份
          n_read:"990",//浏览量
          n_citation:"922",//引用量
          keywords:"浅度学习，浅度学习，浅度学习",
          author:"adasd",
        },
                {
          paperId:"1",
          title:"深度dd学习",
          year:"2021-12-1",//出版年份
          n_read:"190",//浏览量
          n_citation:"222",//引用量
          keywords:"深度学习，深度学习，深度学习",
          author:"dassad",
        },
        {
          paperId:"2",
          title:"浅度学asdasd习",
          year:"2021-12-1",//出版年份
          n_read:"990",//浏览量
          n_citation:"922",//引用量
          keywords:"浅度学习，浅度学习，浅度学习",
          author:"asdadas",
        },
                {
          paperId:"1",
          title:"深adas度学习",
          year:"2021-12-1",//出版年份
          n_read:"190",//浏览量
          n_citation:"222",//引用量
          keywords:"深度学习，深度学习，深度学习",
          author:"adadasd",
        },
        {
          paperId:"2",
          title:"浅度sddas学习",
          year:"2021-12-1",//出版年份
          n_read:"990",//浏览量
          n_citation:"922",//引用量
          keywords:"浅度学习，浅度学习，浅度学习",
          author:"sdaasdas",
        },*/
      ],
      inputOfPaperFilter:"",//学术成果标题关键字搜索
      filters: {//过滤器
          title1:'',
          title2:'',
          title3:'',
      },
      curPage1:1,
      pageSize1:5,
      curPage2:1,
      pageSize2:5,
      curPage3:1,
      pageSize3:5,
      curPage4:1,
      pageSize4:4,
      curPage5:1,
      pageSize5:4,
    }
  },
  computed:{
    tableData1:function(){
        return this.collectPaperList.filter(item => {
          if (this.filters.title1) {
            if (!(item.title&& item.title.includes(this.filters.title1))) {
              return false;
            }
          }
          return true;
        })
    },
    pageData1:function(){
      return this.tableData1.slice((this.curPage1 - 1) * this.pageSize1, this.curPage1 * this.pageSize1);
    },
    tableData2:function(){
        return this.displayPaperList.filter(item => {
          if (this.filters.title2) {
            if (!(item.title&& item.title.includes(this.filters.title2))) {
              return false;
            }
          }
          return true;
        })
    },   
        pageData2:function(){
      return this.tableData2.slice((this.curPage2 - 1) * this.pageSize2, this.curPage2* this.pageSize2);
    },
    tableData3:function(){
        return this.paperList.filter(item => {
          if (this.filters.title3) {
            if (!(item.title&& item.title.includes(this.filters.title3))) {
              return false;
            }
          }
          return true;
        })
    },
    pageData3:function(){
      return this.tableData3.slice((this.curPage3 - 1) * this.pageSize3, this.curPage3 * this.pageSize3);
    }, 
    pageData4:function(){
      return this.fanList.slice((this.curPage4 - 1) * this.pageSize4, this.curPage4 * this.pageSize4);
    },
    pageData5:function(){
      return this.followList.slice((this.curPage5 - 1) * this.pageSize5, this.curPage5 * this.pageSize5);
    }  
    },
  methods:{
      handleCurrentChange1(val) {
        this.curPage1 = val
      },
      handleSizeChange1(val) {
        this.curPage1 = 1
        this.pageSize1 = val
      },
      handleCurrentChange2(val) {
        this.curPage2 = val
      },
      handleSizeChange2(val) {
        this.curPage2 = 1
        this.pageSize2 = val
      },
      handleCurrentChange3(val) {
        this.curPage3 = val
      },
      handleSizeChange3(val) {
        this.curPage3 = 1
        this.pageSize3 = val
      },
      handleCurrentChange4(val) {
        this.curPage4 = val
      },
      handleSizeChange4(val) {
        this.curPage4 = 1
        this.pageSize4 = val
      },
      handleCurrentChange5(val) {
        this.curPage5 = val
      },
      handleSizeChange5(val) {
        this.curPage5 = 1
        this.pageSize4 = val
      },       
     getUrl(path) {
      this.imageUrl = path
    },
    deleteFollow(userId){
      this.followList.forEach((item,index)=>{
        if(item.id==userId){
          this.followList.splice(index,1);
        }
      })
    },
    editUsername:function(){
      const edituser=document.querySelectorAll('.editUsernameFunc');
      edituser.forEach(edit=>{
        edit.classList.add('invisible');
      })
      const editInput=document.querySelectorAll('.editInput');
      editInput.forEach(elem=>{
        elem.classList.remove('invisible');
      })
    },
    confirmEditUsername:function(){
      const confirmEdit=document.querySelectorAll('.editInput');
      confirmEdit.forEach(elem=>{
        elem.classList.add('invisible');
      })
      const edituser=document.querySelectorAll('.editUsernameFunc');
      edituser.forEach(edit=>{
        edit.classList.remove('invisible');
      })
      //todo:与后端交互完成昵称修改
      if(this.usernameTmp!==this.username)
      this.editSetting();
    },
    toMessageList:function(){
      //转跳到消息列表页面
      this.$router.push({path:'/personalMessage',query:{id:this.id}});
    },
    toCollection:function(tabName){
      this.tabChange(tabName);
      const paper=document.querySelector('.paper');
      const follow=document.querySelector('.follow');
      paper.classList.add('invisible');
      follow.classList.add('invisible');
      const collection=document.querySelector('.collection');
      collection.classList.remove('invisible');
    },  
    topaper:function(tabName){
      this.tabChange(tabName);
      const paper=document.querySelector('.paper');
      const follow=document.querySelector('.follow');
      paper.classList.remove('invisible');
      follow.classList.add('invisible');
      const collection=document.querySelector('.collection');
      collection.classList.add('invisible');
    },
    toFollow:function(tabName){
      this.tabChange(tabName);
      const paper=document.querySelector('.paper');
      const follow=document.querySelector('.follow');
      paper.classList.add('invisible');
      follow.classList.remove('invisible');
      const collection=document.querySelector('.collection');
      collection.classList.add('invisible');
    },
    tabChange:function(tabName){
      console.log(tabName);
      const tabs=document.querySelectorAll('.tab');
      tabs.forEach(elem=>{
        elem.classList.remove('Lower');
      })
      const tab=document.querySelector('.'+tabName);
      tab.classList.add('Lower');
    },
    deletePaper:function(paperId){
      //从collectPaperList中删除
      axios.delete('/api/collection',{data:{userId:this.id,paperId:paperId}})
      .then(response=>{
        console.log(response);
        if(response.data.code==200){
          this.$message({message:"删除成功",type:'success'});
        this.collectPaperList.forEach((item,index,arr)=>{
        if(item.paperId===paperId){
          arr.splice(index,1);
        }
      }) 
        }else{
          this.$message({message:response.data.msg,type:'error'});
        }
      })
      .catch(error=>{
        console.log(error);
      })   
    },
    deleteDisplayPaper:function(paperId){
      //从displayPaperList中删除
      axios.post('/api/scholarPortal/deletepaper',{ids:[paperId]})
      .then(response=>{
        console.log(response);
        if(response.data.code==200){
          this.$message({message:"删除成功",type:'success'});
                this.displayPaperList.forEach((item,index,arr)=>{
        if(item.paperId==paperId){
          arr.splice(index,1);
        }
      }) 
        }else{
          this.$message({message:response.data.msg,type:'error'});
        }
      })
      .catch(error=>{
        console.log(error);
      })   
    },
    addDisplayPaper:function(paperId){
      //添加到展示列表
      console.log(paperId);
      axios.post('/api/scholarPortal/addpaper',{ids:[paperId]})
      .then(response=>{
        console.log("添加展示");
        console.log(response);
        if(response.data.code==200){
          this.$message({message:"添加成功",type:'success'});
          this.paperList.forEach((item,index,arr)=>{
            if(item.paperId==paperId){
              this.displayPaperList.push(item);
            }
          })           
        }else{
          this.$message({message:response.data.msg,type:'error'});
        }
      })   
    },
    toPaperDetail:function(paperId){
      //去往论文详情页面
      sessionStorage.setItem('paperId',paperId);
      this.$router.push({path:'/PaperDetail',query:{paperId:paperId}});
    },
    editSetting:function(){
      this.dialogSettingVisible=false;
      //向后端提交修改
      let changePwd=false;
      if(this.newPassword.length>0){
        if(this.oldPassword.length==0){
        this.$message({message:"请输入旧密码",type:'error'});
        return;
      }
        if(this.newPasswordAgain.length==0){
          this.$message({message:"请确认新密码",type:'error'});
          return;
        }else{
          if(this.newPasswordAgain!==this.newPassword){
            this.$message({message:"两次密码输入不一致",type:'error'});
            return;
          }
        }
        changePwd=true;
      }
      if(!changePwd)
      this.userMsg.pwd=null;
      else{
        let data=new FormData();
        let t={};
        t.newPassword=this.newPassword;
        t.oldPassword=this.oldPassword;
        t.userId=this.id;
        data.append("newPassword",this.newPassword);
        data.append("oldPassword",this.oldPassword);
        data.append("userId",this.id);
        axios.post('/api/user/alterPassword',data)
        .then(response=>{
          if(response.data.code==200){
            this.$message({message:"密码修改成功",type:'success'});
          }else{
            this.$message({message:"密码修改失败 "+response.data.msg,type:'error'});
          }
        })
        .catch(error=>{
          console.log(error);
          console.log(t);
        })
      }
      this.userMsg.name=this.username=this.usernameTmp;
      this.userMsg.birthday=this.birthday=this.birthdayTmp;
      this.userMsg.email=this.email=this.emailTmp;
      let flag=true;
      if(this.newPassword.length>0)
      this.userMsg.pwd=this.newPassword;
      axios.put('/api/user/update',this.userMsg)
      .then(response=>{
           flag=true;
      })
      .catch(error=>{
            flag=false;
      })
      //与后端交互
      if(this.isBookman){
        this.scholarMsg.name=this.realName=this.realNameTmp;
        this.scholarMsg.field=this.field=this.fieldTmp;
        this.scholarMsg.affi=this.affi=this.affiTmp;
        //与后端交互
        axios.put('/api/scholar',this.scholarMsg)
        .then(response=>{
          flag=true;
        })
        .catch(error=>{
          flag=false;
        })
      }
        if(flag)
        this.$message({message:"更新成功",type:'success'});
        else
        this.$message({message:"更新失败",type:'error'}); 
        this.newPassword=this.oldPassword=this.newPasswordAgain="";
    },
    toAllFan:function(){//粉丝页面
      const fan=document.querySelector('.allFan');
      fan.classList.remove('invisible');
      const follow=document.querySelector('.allFollow');
      follow.classList.add('invisible');
      const opFan=document.querySelector('.allFanOp');
      opFan.classList.add('changeColor');
      const opFollow=document.querySelector('.allFollowOp');
      opFollow.classList.remove('changeColor');
    },
    toAllFollow:function(){//关注页面
      const fan=document.querySelector('.allFan');
      fan.classList.add('invisible');
      const follow=document.querySelector('.allFollow');
      follow.classList.remove('invisible');
      const opFan=document.querySelector('.allFanOp');
      opFan.classList.remove('changeColor');
      const opFollow=document.querySelector('.allFollowOp');
      opFollow.classList.add('changeColor');
    },
    toMyPage:function(userId,userIdIn){//去往个人页面 userIdIn进入者,userId主页拥有者
      this.$router.push({path:'/MyPage',query:{userId:userId,userIdIn:userIdIn}});
    },
    toDisplayPaper:function(){//展示论文
      const dis=document.querySelector('.displayPaper');
      dis.classList.remove('invisible');
      const all=document.querySelector('.allPaper');
      all.classList.add('invisible');
      const disOp=document.querySelector('.displayPaperOp');
      disOp.classList.add('changeColor');
      const allOp=document.querySelector('.allPaperOp');
      allOp.classList.remove('changeColor');
    },
    toAllPaper:function(){//全部论文
      const dis=document.querySelector('.displayPaper');
      dis.classList.add('invisible');
      const all=document.querySelector('.allPaper');
      all.classList.remove('invisible');
      const disOp=document.querySelector('.displayPaperOp');
      disOp.classList.remove('changeColor');
      const allOp=document.querySelector('.allPaperOp');
      allOp.classList.add('changeColor');     
    },
    editSettingCancel:function(){
      this.dialogSettingVisible = false
      this.emailTmp=this.email;
      this.usernameTmp=this.username;
      this.birthdayTmp=this.birthday;
      if(this.isBookman){
        this.realNameTmp=this.realName;
        this.affiTmp=this.affi;
        this.field=this.fieldTmp;
      }
    }
  }
}
</script>

<style scoped>
.outer{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height:150vh;
  width:100vw;
  background-image: url('../assets/images/apple.jpg');
}
.inner1{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width:75vw;
  height:25vh;
  background-color: white;
  margin-top:7rem;
  margin-bottom: 3rem;
  box-shadow: 0.5rem 0.5rem 1rem #607d8b;
}
.inner2{
  width:75vw;
  height:100vh;
  background-color: white;
  box-shadow: 0.5rem 0.5rem 1rem #607d8b;
}
.profilePhoto{
  width:7rem;
  height:7rem;
  border-radius: 7rem;
  background-size:cover;
  margin-left: 2rem;
  display:flex;
  align-items: center;
  justify-content: space-around;
  border: solid #9e9e9e;
}
.profilePhoto:hover .upload{
  display:flex;
}
.username{
  font-size:1.5rem;
  color:#263238;
  font-weight:600;
}
.fa-edit{
  font-size: 1.2rem;
}
.editProfileSetting{
  width: 6rem;
  height: 3rem;
  border: none;
  background-color: #1e88e5;
  color:white;
  cursor: pointer;
  box-shadow: 0.3rem 0.3rem #1976d2;
  margin-left: 3rem;
}
.editProfileSetting:hover{
  background-color: #1565c0;
}
.rightBlock{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35rem;
  height: 8rem;
}
.rightLeftBlock{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width:15rem;
  height: 8rem;
  margin-left: 5rem;
}
.leftBlock{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width:30rem;
  height: 10rem;
}
.gapLine{
  border: 0.05rem solid grey;
  width: 0;
  height: 5rem;
}
.number{
  height: 8rem;
  width: 6rem;
}
.number .t1{
  font-size: 1.8rem;
  width:6rem;
  height:3rem;
  margin: 0;
  padding: 0;
  margin-top:2rem;
  font-weight: 900;
  text-align: center;
}
.number .t2{
  font-size:1rem;
  color:grey;
  width: 6rem;
  height: 2rem;
  text-align: center;
  margin-top:0;
}
.editInput{
  width:8rem;
  height:2rem;
  border-left: 0;
  border-right:0;
  border-top: 0;
  border-bottom: 0.1rem solid #311b92;
  font-size: 1rem;
  outline: none;
}
button.editInput{
  width: 3rem;
  height: 2rem;
  background-color: #1e88e5;
  color: white;
  font-size: 0.9rem;
  border: none;
  outline: none;
  box-shadow: 0.2rem 0.2rem #1565c0;
}
button.editInput:hover{
  background-color: #1565c0;
}
.inner2Top{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: 10vh;
  width: 30vw;
}
.inner2Bottom{
  width:75vw;
  height: 90vh;

}
.tab{
  width: 7rem;
  height:7vh;
  background-color:#37474f;
  text-align: center;
  font-size: 1em;
  line-height: 7vh;
  border: none;
  outline: none;
  box-shadow: 0.3rem 0.2rem #78909c;
  color:white;
  cursor: pointer;
  margin-top:1rem;
  transition: all 0.2s ease-in-out;
  margin-left: 2rem;
}
.tab:hover{
  background-color: #90a4ae;
}
.Lower{
  margin-top:3rem;
}
.gapLineOut{
  width:75vw;
  height:5vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gapLineHorizon{
  width:70vw;
  height:0.1rem;
  background-color: grey;
}
.tabBottom{
  width:75vw;
  height: 85vh;
}
.message{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  cursor: pointer;
  margin-left:-2rem;
  transition: all 0.2s ease-in-out;
}
.contentTop{
  width: 75vw;
  height: 5vh;  
}
.contentTopInner{
  width:8rem;
  height: 5vh;
  margin-left:2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.contentTopInner div{
  cursor: pointer;
}
.contentBottom{
  width: 75vw;
  height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
input.filterInput{
  width:13rem;
  height:3rem;
  border-left: 0;
  border-right:0;
  border-top: 0;
  border-bottom: 0.15rem solid #311b92;
  font-size: 1rem;
  outline: none;
  margin-bottom: 3rem;
}
.Op{
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.follow{
  background-color: white;
}
.setting div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 25rem;
  height: 7rem;
}
.setting input{
  width:13rem;
  height:3rem;
  border-left: 0;
  border-right:0;
  border-top: 0;
  border-bottom: 0.15rem solid #311b92;
  font-size: 1rem;
  outline: none;
}
.setting label{
  font-size: 1.1rem;
  color:#455a64;
}
.changeColor{
  color: #1565c0;
}
.invisible{
  display: none;
}
</style>